<template>
  <el-form :inline="true">
    <el-form-item>
      <el-tree ref="tree"
               :data="perms"
               :props="defaultProps"
               :default-checked-keys="defaultPerms"
               show-checkbox
               node-key="id" />
    </el-form-item>
    <br>
    <el-form-item>
      <el-button :loading="loading"
                 type="primary"
                 @click="handleFormSubmit">
        授权
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    row: {
      default: Object,
      type: Object
    },
    perms: {
      default: () => [],
      type: Array
    },
    defaultPerms: {
      default: () => [],
      type: Array
    },
    loading: {
      default: false,
      type: Boolean
    }
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'describe'
      }
    }
  },
  updated() { this.$refs.tree.setCheckedKeys(this.defaultPerms) },
  methods: {
    handleFormSubmit() {
      this.$emit('submit', { 'id': this.row.id, 'permIds': this.$refs.tree.getCheckedKeys() })
    }
  }
}
</script>
